<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-position="top" :error-type="['toast']">
			<u-form-item label="宝宝">
				<view class="children-view">
					<children-list-view :addShow="addShow()" @showClasses="showClasses" :childrenList="childrenList"
						@itemClick="childrenItemClick"></children-list-view>
				</view>
			</u-form-item>
			<u-form-item label="月龄" prop="monthAge">
				<u-input type="select" placeholder="请选择月龄" v-model="form.monthAge" @click="timeShow = true" />
			</u-form-item>
			<u-form-item label="儿心量表" prop="label">
				<u-input v-model="form.label" type="textarea"/>
			</u-form-item>
			<u-form-item label="格赛尔发育量表" prop="content">
				<u-input v-model="form.content" type="textarea"/>
			</u-form-item>
			<u-form-item label="照片">
				<x-upload
					ref="uUpload"
					:form-data="formData"
					@onUploaded="onUploaded"
				/>
			</u-form-item>
		</u-form>
		<u-button class="action-view" @click="saveClick">保存</u-button>
		<u-select v-model="timeShow" :list="list" @confirm="confirmTime"></u-select>
		<children-select-view ref="popupConpare" @confirm="confirm"></children-select-view>
	</view>
</template>

<script>
	import XUpload from '@/components/x-upload'
	import ChildrenListView from '@/components/children-list-view.vue'
	import ChildrenSelectView from '@/components/children-select-view.vue'
	import {
		formatDateByTimestamp
	} from '@/utils/utils.js'
	import recordMixin from './mixins/index.js'
	import { getMonthAgeGrowth, addMilepost } from './api/growth.js'
	export default {
		mixins: [recordMixin],
		components: {
			ChildrenListView,
			ChildrenSelectView,
			XUpload
		},
		data() {
			return {
				form: {
					monthAge: '',
					label: '',
					content: '',
				},
				rules: {
					monthAge: [{
						required: true,
						message: '请选择月龄',
					}, ],
					label: [{
						required: true,
						message: '请选择就餐类型',
					}, ],
					content: [{
						required: true,
						message: '请选择主食',
					}, ]
				},
				timeShow: false,
				list: [],
				
				formData: {
					'bizType': 'growth-observe'
				},
			}
		},
		onLoad() {
			const monthList = []
				for (let i = 1; i <= 48; i++) {
					monthList.push({
						value: i,
						label: `${i}月龄`
				})
			}
			this.list = monthList
		},
		methods: {
			addRecord() {
				uni.showLoading({})
				this.$refs.uUpload.upload();
			},
			
			addData() {
				uni.showLoading({})
				let childIds = '';
				let classIds = '';
				for (let index in this.childrenList) {
					let item = this.childrenList[index];
					childIds += `,${item.id}`;
					classIds += `,${item.classesId}`;
				}
				if (childIds.length > 0) {
					childIds = childIds.substring(1);
					classIds = classIds.substring(1);
				}
				if (!this.$u.test.isEmpty(this.recordId)) {
					this.form.id = this.recordId
					this.form.childrenIds = childIds
				}else {
					this.form.childrenIds = childIds
				}
				this.form.classIds = classIds;
				addMilepost(this.form).then(res => {
					this.$u.toast('添加成功');
					uni.hideLoading()
					setTimeout(function(){
						uni.navigateBack({delta:1})
					},1000)
				})
			},

			confirmTime(res) {
				console.log(res)
				if (res.length > 0) {
					this.form.monthAge = res[0].value
					this.getMonthAgeGrowth(res[0].value)
				}
			},
			
			getMonthAgeGrowth(monthAge) {
				getMonthAgeGrowth({monthAge}).then(res => {
					console.log(res);
					this.form.label = res.data.label;
					this.form.content = res.data.content;
				})
			},
			onUploaded(data) {
				uni.hideLoading()
				this.form.url = data.resourceUrl;
				this.addData();
			},
			getRecord() {
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss">
	@import '@/css/u-form.scss';
	
	.container {
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.children-view {
		width: 10rpx;
		flex: 1;
		display: flex;
		flex-direction: row;
	}

	.action-view1 {
		margin-top: 160rpx;
	}

</style>
